<template>
    <z-paging ref="paging" v-model="list" @query="queryList">
        <view class="container">
            <!-- 地址列表 -->
            <view class="items" v-for="(item, index) in list" :key="index" @click="selectOne(item)">
                <view class="u-flex u-col-center">
                    <view class="address-data u-flex-1" :class="{ dark: item.isDefault }">
                        <view>
                            <text class="name">{{ item.receiverName }}</text>
                            <text class="u-margin-left-20">{{ item.receiverPhone }}</text>
                        </view>
                        <view class="address">
                            {{
                                `${item.provinceName}
                            ${item.cityName && item.cityName != 'null' ? item.cityName : ''}
                            ${item.areaName && item.areaName != 'null' ? item.areaName : ''}
                            ${item.detailAddress}`
                            }}
                        </view>
                    </view>
                    <view class="del" @click.stop="deleteItem(item.id)">删除</view>
                    <view class="action-btn u-text-center shrink" @click.stop="changeReceiveInfo(item)">编辑</view>
                    <view class="mark" v-if="item.isDefault">
                        <text class="default-mark">默认</text>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
    <u-modal v-model="showModal" content="确定要删除这条记录吗?" title="" @confirm="removeAddress" show-cancel-button></u-modal>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useUserStore } from '@/store'

const list = ref<Array<any>>([])
const id = ref(0)
const canSelect = ref(false)
const showModal = ref(false)
/** 组件 z-paging */
const paging: any = ref(null)

const userStore = useUserStore()

const queryList = (pageNo: number) => {
    let param = {
        size: 10,
        merchantId: userStore.userInfo.merchantId,
        current: pageNo
    }
    uni.$u.$api.MerchantApi.queryMerchantAddressPage(param).then((res: any) => {
        paging.value.complete(res.records)
    })
}

const selectOne = (item: any) => {
    if (canSelect.value) {
        uni.$emit('addressChange', item)
        uni.$u.$MRouter.back()
    }
}
const deleteItem = (iid: number) => {
    showModal.value = true
    id.value = iid
}

const changeReceiveInfo = (item: any) => {
    uni.$u.$MRouter.editReceiveAddress.to({ item: JSON.stringify(item) })
}

const scrollHeight = computed(() => {
    return
})

const removeAddress = () => {
    uni.$u.$api.MerchantApi.delAddress({ id: id.value }).then(() => {
        uni.$u.toast('删除完成!')
        setTimeout(() => {
            list.value = list.value.filter(m => m.id != id)
        }, 500)
    })
}
</script>
<style scoped lang="scss">
.container {
    padding: 20rpx 30rpx;
    height: 100vh;

    .items {
        background-color: $uni-bg-color;
        border-radius: 10rpx;
        padding: 20rpx 30rpx;
        position: relative;
        margin-bottom: 20rpx;
        font-size: 26rpx;

        .address-data {
            font-size: 26rpx;
            color: #999999;
            padding-right: 50rpx;

            .address {
                font-size: 28rpx;
            }

            .name {
                font-size: 30rpx;
                color: #333333;
            }
        }

        .dark {
            color: #333333;
        }

        .action-btn {
            width: 100rpx;
        }

        .mark {
            position: absolute;
            right: 0;
            top: 0;
            .default-mark {
                background-color: $cf-primary;
                color: white;
                border-radius: 0px 10rpx 0px 10rpx;
                padding: 0 12rpx;
                font-size: 24rpx;
            }
        }

        .del {
            width: 100rpx;
            color: $uni-color-error;
            border-right: 1rpx solid #979797;
        }
    }
}
</style>
